<template>
	<div class="home">
		<p v-for="item in 20" :key="item">这是一个神奇的功能。</p>
		<div class="bgTest" id="bgTest" :style="{'background-position-y':positionY1+'px'}"></div>
		<p v-for="item in 20" :key="item+20">爱你，爱你爱着你。</p>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				positionY1: 0, //背景Y轴偏移量
				Y1: 0,
				ratio: 0.1 //视差偏移率
			}
		},
		/**
		 * 
		 * */
		mounted() {
			window.addEventListener("scroll", this.handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
			let bgTest = document.getElementById("bgTest");
			this.Y1 = bgTest.offsetTop * this.ratio
			console.log(bgTest.offsetTop + '****************');
		},
		methods: {
			/**
			 * 背景视差偏移计算
			 * */
			handleScroll: function() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;

				console.log(window.pageYOffset + '****************-1');
				console.log(document.documentElement.scrollTop + '****************-2');
				console.log(document.body.scrollTop + '****************-3');

				this.positionY1 = this.Y1 - scrollTop * this.ratio; //原始高度-滚动距离*视差系数

				console.log(this.positionY1 + '-------------------3');
			}
		},
		components: {}
	};
</script>

<style>
	.bgTest {
		height: 500px;
		background: url(../assets/bg.jpg) no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
		font-size: 20px;
	}
</style>
